<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fengtop 导航菜单</title>
<script language="javascript" type="text/javascript" src="js/jquery-1.6.4.js"></script>
<style type="text/css">
{literal}
body{margin: 0;background-color:#b5c49b;}
ul,li{
	list-style:none;
	font-size:12px;
	line-height:20px;
	width:100%;
	margin:0;padding:0px 0px 0px 8px;
	float: left;
}
li{white-space:nowrap;}
.child{
	display:none;
}
.nav a{
	display:block;
	color:#5c84c1;
}
.nav{
position:absolute;
}
</style>
<script language="javascript" type="text/javascript">
//说明 所有的元素以ul li ul li ul li的循环格式嵌套 如果没有下级分类 就用li a结束嵌套
$(document).ready(function(){
	//$(".nav ul li").children("ul").hide();
	$(".nav").find("li").not(":has(ul)").children("a").css({textDecoration:"none",color:"#333",background:"none"})
	.click(function(){
		$(this).get(0).location.href="'"+$(this).attr("href")+"'";
		$(this).get(0).location.target="'"+$(this).attr("target")+"'";
	});
	$(".nav").find("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"})
	.click(function(){
		if($(this).next("ul").is(":hidden")){
			$(this).next("ul").slideDown("slow");
			if($(this).parent("li").siblings("li").children("ul").is(":visible")){
				$(this).parent("li").siblings("li").find("ul").slideUp("1000");
				$(this).parent("li").siblings("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"})
				.end().find("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"});
			}
			$(this).css({background:"url(images/statu_open.gif) no-repeat left top;"});
			$(this).get(0).location.href="'"+$(this).attr("href")+"'";
			$(this).get(0).location.target="'"+$(this).attr("target")+"'";
			return false;
		}else{
		$(this).next("ul").slideUp("normal");
		//不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏
		$(this).css({background:"url(images/statu_close.gif) no-repeat left top;"});
		$(this).next("ul").children("li").find("ul").fadeOut("normal");
		$(this).next("ul").find("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"});
		$(this).get(0).location.href="'"+$(this).attr("href")+"'";
			$(this).get(0).location.target="'"+$(this).attr("target")+"'";
		return false;
		}
	});
});
{/literal}
</script>
</head>
<body>
<br>
<br>
<div class="nav">
<ul>
{assign var="child2" value=0}
{assign var="child3" value=0}

{section name=i loop=$group} 
	{if $group[i].fup eq '0'}
		<li><a href="index.php?list-group-{$group[i].plate}" target="forum_main" >{$group[i].name}</a>
		{$child2 = 0}
		
		{section name=j loop=$forum} 
			{if $forum[j].fup eq $group[i].fid}
				{if $child2 eq '0'}
					<ul class="child">
					{$child2 = 1}
				{/if}
				<li><a href="index.php?list-forum-{$forum[j].plate}" target="forum_main" >{$forum[j].name}</a>
				{$child3 = 0}
				
				{section name=k loop=$sub} 
					{if $sub[k].fup eq $forum[j].fid}
						{if $child3 eq '0'}
							<ul class="child">
							{$child3 = 1}
						{/if}
						<li><a href="index.php?list-sub-{$sub[k].plate}" target="forum_main" >{$sub[k].name}</a></li>
						{if $sub[k].fup neq $sub[$smarty.section.k.index_next].fup}
							</ul>
							{break} 
						{/if}
					{/if}
				{/section}
			{/if}
			{if $forum[j].fup eq $group[i].fid}
				</li>
				{if $forum[$smarty.section.j.index_next].fup neq $group[i].fid}
					</ul>
					{break}
				{/if}
			{/if}
		{/section}
	{/if}
	{if $group[$smarty.section.i.index_next].fup eq '0'}
		</li>
	{/if}
{/section}
<!-- <li>
	<a href="#">一级菜单</a>
		<ul class="child">
			<li><a href="#">二级菜单</a></li>
			<li><a href="#">二级菜单</a>
				<ul class="child">
					<li><a href="#">三级菜单</a></li>
					<li><a href="#">三级菜单</a></li>
				</ul>
			</li>
			<li><a href="#">二级菜单</a>
			<ul class="child">
				<li><a href="#">三级菜单</a></li>
				<li><a href="#">三级菜单</a>
					<ul class="child">
						<li><a href="">四级菜单</a></li>
						<li><a href="">四级菜单</a></li>
						<li><a href="">四级菜单</a>
							<ul class="child">
								<li><a href="">五级菜单</a></li>
								<li><a href="">五级菜单</a></li>
								<li><a href="">五级菜单</a></li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
			</li>
		</ul>
	</li>
-->
</ul>
</div>
</body>
</html>
